import 'package:flutter/material.dart';
import 'package:flutter/cupertino.dart';
import 'package:flutter_business_1803a/page/cart_page.dart';
import 'package:flutter_business_1803a/page/category_page.dart';
import 'package:flutter_business_1803a/page/home_page.dart';
import 'package:flutter_business_1803a/page/member_page.dart';

///material是google的一种设计语言
///cupertino 是IOS风格,重现了很多经典的IOS特性的交互和界面风格
///AutomaticKeepAliveClientMixin 用于Flutter保持页面设置,那个页面需要保持,就混入(with)
///页面必须得是StatefulWidget
///有2个前置组件才能保持页面状态,PageView和IndexedStack
///重写wantKeepAlive方法

class IndexPage extends StatefulWidget {
  @override
  _IndexPageState createState() => _IndexPageState();
}

class _IndexPageState extends State<IndexPage> {
  PageController _pageController;
  final List<BottomNavigationBarItem> bottomTabs = [
    BottomNavigationBarItem(icon: Icon(CupertinoIcons.home), title: Text('首页')),
    BottomNavigationBarItem(
        icon: Icon(CupertinoIcons.search), title: Text('分类')),
    BottomNavigationBarItem(
        icon: Icon(CupertinoIcons.shopping_cart), title: Text('购物车')),
    BottomNavigationBarItem(
        icon: Icon(CupertinoIcons.profile_circled), title: Text('会员中心')),
  ];

  final List tabBodies = [HomePage(), CategoryPage(), CartPage(), MemberPage()];

  int currentIndex = 0;
  var currentPage;

  @override
  void initState() {
    currentPage = tabBodies[currentIndex]; //初始化时,当前显示页面为首页
    _pageController = PageController()
      ..addListener(() {
        if (currentPage != _pageController.page.round()) {
          setState(() {
            currentPage = _pageController.page.round();
          });
        }
      });
    super.initState();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      backgroundColor: Color.fromRGBO(244, 245, 245, 1.0),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        currentIndex: currentIndex,
        items: bottomTabs,
        onTap: (index) {
          //每当点击导航栏item时,切换当前页面的状态,从而展示不同的页面
          setState(() {
            currentIndex = index;
            currentPage = tabBodies[currentIndex];
          });
        },
      ),
      body: IndexedStack(
        index: currentIndex,
        children: <Widget>[
          HomePage(),
          CategoryPage(),
          CartPage(),
          MemberPage()
        ],
      ),
    );
  }
}
